<template>
  <view class="message-container" style="background-color: #f5f9ff; min-height: 100vh;">

    <!-- 标题栏 -->
    <view style="text-align: center; padding: 10px 0;">
      <text style="font-size: 18px; font-weight: bold;">消息</text>
    </view>

    <!-- 消息分类选项卡 -->
    <view class="message-tabs" style="display: flex; justify-content: space-around; background-color: #fff; padding: 10px 0;">
      <text 
        v-for="tab in tabs" 
        :key="tab.value"
        :style="activeTab === tab.value ? activeStyle : inactiveStyle"
        style="padding: 10px 0; font-size: 16px;"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
        <view 
          v-if="activeTab === tab.value"
          style="margin-top: 5px; height: 3px; background-color: #1a73e8; border-radius: 3px;"
        ></view>
      </text>
    </view>

    <!-- 支付消息列表 -->
    <view class="message-list" style="padding: 0 20px;" v-if="activeTab === 'payment'">
      <view 
        class="message-item" 
        v-for="(item, index) in paymentMessages" 
        :key="index"
        style="display: flex; padding: 15px 0; border-bottom: 1px solid #f5f5f5;"
      >
        <view style="width: 40px; height: 40px; border-radius: 20px; background-color: #eee; margin-right: 12px;"></view>
        <view style="flex: 1;">
          <text style="font-size: 16px; color: #000; display: block;">{{ item.name }}</text>
          <text style="font-size: 12px; color: #999; display: block;">{{ item.account }}</text>
        </view>
        <view style="text-align: right;">
          <text style="font-size: 16px; color: #000; display: block;">{{ item.amount }}</text>
          <text style="font-size: 12px; color: #999; display: block;">{{ item.time }}</text>
        </view>
      </view>
    </view>

    <!-- 互动消息列表 -->
    <view class="interaction-list" style="padding: 0 20px;" v-if="activeTab === 'interaction'">
      <view 
        class="interaction-item" 
        v-for="(item, index) in interactionMessages" 
        :key="index"
        style="display: flex; padding: 15px 0; border-bottom: 1px solid #f5f5f5;"
      >
        <view style="position: relative;">
          <view style="width: 40px; height: 40px; border-radius: 20px; background-color: #eee; margin-right: 12px;"></view>
          <view v-if="item.unread" style="position: absolute; top: -3px; right: 8px; width: 8px; height: 8px; border-radius: 4px; background-color: #ff0000;"></view>
        </view>
        <view style="flex: 1;">
          <text style="font-size: 16px; color: #000; display: block;">{{ item.name }}</text>
          <text style="font-size: 12px; color: #999; display: block; margin-top: 5px;">{{ item.content }}</text>
        </view>
        <text style="font-size: 12px; color: #999; align-self: center;">{{ item.time }}</text>
      </view>
    </view>

    <!-- 系统通知列表 -->
    <view class="system-list" style="padding: 0 20px;" v-if="activeTab === 'system'">
      <view 
        class="system-item" 
        v-for="(item, index) in systemMessages" 
        :key="index"
        style="background-color: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px;"
      >
        <text style="font-size: 16px; color: #000; font-weight: bold; display: block;">{{ item.title }}</text>
        <text style="font-size: 12px; color: #999; display: block; margin: 5px 0;">{{ item.time }}</text>
        <text style="font-size: 14px; color: #000; display: block; margin-bottom: 10px;">{{ item.content }}</text>
        <text style="font-size: 14px; color: #1a73e8; display: block; text-align: right;">查看详情 ></text>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar" style="position: fixed; bottom: 0; width: 100%; display: flex; background-color: #fff; padding: 10px 0; border-top: 1px solid #eee;">
      <view class="tab-item" style="flex: 1; text-align: center;">
        <text style="font-size: 12px; color: #666;">首页</text>
      </view>
      <view class="tab-item" style="flex: 1; text-align: center;">
        <text style="font-size: 12px; color: #1a73e8;">消息</text>
      </view>
      <view class="tab-item" style="flex: 1; text-align: center;">
        <text style="font-size: 12px; color: #666;">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'payment',
      tabs: [
        { label: '支付消息', value: 'payment' },
        { label: '互动消息', value: 'interaction' },
        { label: '系统通知', value: 'system' }
      ],
      activeStyle: {
        color: '#1a73e8',
        fontWeight: 'bold'
      },
      inactiveStyle: {
        color: '#666'
      },
      paymentMessages: [
        { name: '王丽丽', account: '1号微信', amount: '123.30', time: '2023-10-03 18:10:23' },
        { name: '王丽丽', account: '1号微信', amount: '123.30', time: '2023-10-03 18:10:23' },
        { name: '王丽丽', account: '1号微信', amount: '123.30', time: '2023-10-03 18:10:23' },
        { name: '王丽丽', account: '1号微信', amount: '123.30', time: '2023-10-03 18:10:22' }
      ],
      interactionMessages: [
        { name: '王丽丽', content: '关注了你', time: '21:00', unread: true },
        { name: '王丽丽', content: '老板，下单啦', time: '21:00', unread: true },
        { name: '王丽丽', content: '已收到您的订单', time: '21:00', unread: false },
        { name: '王丽丽', content: '感谢您的支持', time: '20:30', unread: false }
      ],
      systemMessages: [
        { 
          title: '匿名支付用户服务协议及隐私政策修订通知', 
          content: '你好，根据业务开展的实际情况，通华支付近期更新了《"匿名支付"用户服务协议》《"匿名支付"隐私政策》中的有关内容。', 
          time: '2013-04-20 19:00' 
        },
        { 
          title: '系统维护通知', 
          content: '为了提供更好的服务，我们将在今晚00:00-02:00进行系统升级维护', 
          time: '2023-10-02 15:30' 
        }
      ]
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab
    }
  }
}
</script>

<style>
/* 全局样式 */
.message-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding-bottom: 60px; /* 给底部导航栏留空间 */
}

/* 最后一个消息项无下边框 */
.message-list > view:last-child,
.interaction-list > view:last-child {
  border-bottom: none !important;
}

/* 选项卡过渡效果 */
.message-tabs text {
  transition: color 0.3s ease;
}

/* 圆角样式 */
.system-item {
  border-radius: 12px;
  overflow: hidden;
}
</style>